import Vue from 'vue' // 默认引入的是runtime版本, 但需要一个runtime+compiler版本
import App from './App' // 在打包时, 内部会使用vue-loader进行vue组件模块进行编译打包, 就会编译模板(生成了render函数)

Vue.config.productionTip = false

new Vue({
  el: '#app',

  // template: `
  //   <div id="a" name="b">
  //     <h2>{{msg}}</h2><span>abc</span>
  //   </div>
  // `
  data: {msg: 'abc'},
  render: function(h) {
    // 使用jsx创建虚拟节点
    let vnode = (
      <div id="a" name="b">
          <h2>{this.msg}</h2><span>abc</span>
      </div>
    )
    // 使用h函数创建虚拟节点
    vnode = h(
      'div',
      {
        attrs: {
          id: 'c',
          name: 'd'
        }
      },
      [
        h('h2', {}, this.msg),
        h('span', {}, 'cba'),
      ]
    )

    console.log(vnode)
    return vnode
  }
})

/* 
虚拟DOM/Node
  一个普通的JS对象, VNode类型
    {
      tag: '标签名',
      data: {
        attrs: {
          属性名1: 属性值1,
          属性名2: 属性值2,
          ...
        }
      },
      children: [
        子vnode1,
        子vnode2
        ...
      ],
      key: 节点的标识   默认值为undefined
    }
  vnode较轻, 而rnode较重
  初始化: 根据vnode生成rnode
  重新: 生成新的vnode => 进行新旧vnode的diff(差异比较)处理 => 进行rnode最小化更新(能复用的尽量复用)
*/